<template>
    <div>
        <div style="background:#eae9e5">
            <van-row gutter="50">
                <van-col 
                style="color:#c2ad98;
                padding: 5% 0px 5% 0px;
                margin-left:3% ;"
                 @click="reMyset" 
                 span="9">
                    <van-icon name="arrow-left" size="20"/>
                </van-col>
                <van-col 
                style="font-weight:900;
                padding: 20px 20px 20px 20px" 
                span="10">店铺直播</van-col>
            </van-row>
        </div>
        
        <div>
            
                    <div
                    @click="tobroadvideo"
                    v-for="item in DataList"
                    :key="item"
                    style="position: relative;
                    float: left;
                    margin:2.5%;
                    margin-top:20px;
                    border-radius: 4px;
                    box-shadow:0px 4px 4px 4px #c3bcaf;
                    width:160px;
                    height:230px;">
                        <van-image
                        width="100%"
                        height="160"
                        :src="item.img"
                        />
                        <div 
                        style="position: absolute;
                        margin-top: -160px;
                        margin-left: 5px;
                        color: white;">
                            <van-icon 
                            size="20" 
                            name="fire" 
                            color="red"/>
                                <span 
                                style="font-size: 12px;"
                                ><span>{{item.num}}</span>人观看
                                </span>
                        </div>
                        <p  
                        style="font-size: 13px;
                        margin-top:-2px;
                        text-indent:10px"
                        >{{item.title}}
                        </p>
                        <p 
                        style="color:#877d81 ;
                        font-size: 12px;
                        margin-top:-2px;
                        text-indent:10px">
                       {{item.shop}}
                        </p>
                    </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import axios from 'axios';
    import { createApp, onMounted,ref,defineComponent} from 'vue';
    import { Col, Row } from 'vant';
    import { useRouter } from 'vue-router';
    import {getbroadCastList} from '@/api/broadCast'
    const $router = useRouter();
    
    // export  default defineComponent({
    //     data(){
    //         return {
    //             DataList:[]
    //         }
    //     },
    // })
    //跳转到直播间内部
    function tobroadvideo(){
        $router.push({path:"broadvideo"})
    }
    //跳转回我的菜单
    function reMyset(){
        $router.push({path:"mine"})
        console.log(1111);
    };  
        
    //请求直播数据
    let DataList=ref('')
    getbroadCastList().then((res:any)=>{
        DataList.value= res.data.list
        // console.log(DataList.value,123);
            console.log(DataList.value,"直播数据");
        })
</script>
<style scoped>
</style>